<template>
  <div class="editor-box">
    <vue-ueditor-wrap v-model="mycontent" :config="config" @before-init="loadUe"></vue-ueditor-wrap>
    <attachment-img ref="imgs" type="img" :type2="typestore" @attachment="chooseImgsOK" />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
import attachmentImg from '@/plugins/attachment-img';
import index from "../api";
// const url = window.location.href;
export default {
  components: {
    VueUeditorWrap,
    attachmentImg
  },
  name: 'UE',
  props: {
    content: {
      type: String,
      default: ''
    },
    typestore: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 富文本的配置项
      config: {
        autoHeightEnabled: false,
        initialFrameHeight: 250,
        initialFrameWidth: 800,
        // UEDITOR_HOME_URL: url.substring(0, url.indexOf('#')).replace('index.html', '') + 'UEditor/',
        UEDITOR_HOME_URL: '' ,
        serverUrl: '',
        enableAutoSave: true
      },
      isInputChange: false, //是否改变内容
      editor_id: 'baidu-editor-' + Math.floor(Math.random() * 10000 + 1),
      newVal: '',
      oldVal: ''
    };
  },
  computed: {
    mycontent: {
      get() {
        return this.content;
      },
      set(newVal) {
        this.$emit('ueditor', newVal);
      }
    }
  },
  created() {
    const publishUrl = '/UEditor/';
    const backendPath = index.isDev ? publishUrl : window.location.href.match(/(\S*)views/)[1]+'views/channel/index/UEditor/';
    this.config.UEDITOR_HOME_URL = backendPath
  },
  methods: {
    // 点击打开图库
    loadUe() {
      window.UE.registerUI('appinsertimage', (editor, uiName) => {
        this.editor = editor;
        return new window.UE.ui.Button({
          name: uiName,
          title: '插入图片',
          //添加额外样式，指定icon图标，这里默认使用一个重复的icon
          cssRules: 'background-position: -381px 0px;',
          onclick: () => {
            this.ue = editor;
            this.attachmentDialogVisible = true;
            this.$refs.imgs.dialogVisible = true;
          }
        });
      });
    },
    // 选中图片后的回显
    chooseImgsOK(e) {
      var src = '<img src="' + e.str + '" style="width: auto;">';
      this.editor.execCommand('inserthtml', src);
    },
    reload() {
      this.$forceUpdate();
      this.isInputChange = false;
    }
  }
};
</script>
<style scoped>
* {
  line-height: normal !important;
}
</style>
